<!-- 首页 -->
<template>
	<view class="container relative">
		<TopNav title="打赏记录" theme="white"></TopNav>
		<view class="main">
			<view class="card">
				<view class="text-gray f-s12 text-center">
					<text>{{detailData.start}} - {{detailData.end}}</text>
				</view>
				<view class="flex justify-evenly align-center m-t15">
					<view class="text-center">
						<view class="text-center">
							<text class="text-bold f-s28">{{detailData.pay_money || 0}}</text>
						</view>
						<view class="m-t11">
							<text class="text-gray f-s12">打赏总收入(元)</text>
						</view>
					</view>
					<view class="card-line"></view>
					<view class="text-center">
						<view class="text-center">
							<text class="text-bold f-s28">{{detailData.reward_money || 0}}</text>
						</view>
						<view class="m-t11">
							<text class="text-gray f-s12">可转余额收入(元)</text>
						</view>
					</view>
				</view>
				<view class="self-btn full-width m-t20" hover-class="pressed" @click="handleSubmit">
					<text>转余额</text>
				</view>
			</view>
			<view class="m-t16">
				<view class="flex justify-between align-center">
					<text class="text-bold f-s15 p-lr8">打赏明细</text>
					<YearMonthPicker v-model="queryParams.date" @change="getList"></YearMonthPicker>
				</view>
				<view class="height-12">

				</view>
			</view>

			<view class="flex-1 overflow-hidden m-t12">
				<scroll-view class="full-height" scroll-y="true" @scrolltolower="handleScrollBottom">
					<view class="radius bg-white list-item" v-for="item in list" :key="item.id">
						<view class="flex align-center justify-between">
							<view class="flex align-center">
								<image :src="item.user_avatar" class="width-28 height-28 round bg-gray" mode=""></image>
								<text class="m-l8 text-bold f-s12">{{item.user_realname}}</text>
							</view>
							<text class="text-bold f-s16 text-theme">+{{item.pay_money}}</text>
						</view>
						<view class="m-t12 text-gray f-s12 line-height16">
							<text style="color: #B2B8C1;">订单编号</text>
							<text class="p-l8 text-black">{{item.order_sn}}</text>
						</view>
						<view class="m-t8 text-gray f-s12 line-height16">
							<text style="color: #B2B8C1;">打赏编号</text>
							<text class="p-l8 text-black">{{item.sn}}</text>
						</view>
						<view class="m-t8 text-gray f-s12 line-height16">
							<text style="color: #B2B8C1;">打赏时间</text>
							<text class="p-l8 text-black">2{{item.pay_time}}</text>
						</view>
						<view class="m-t8 text-gray f-s12 line-height16">
							<text style="color: #B2B8C1;">打赏方式</text>
							<text class="p-l8 text-black">{{item.payment_name}}</text>
						</view>
					</view>
					<view class="padding-tb-xs" v-if="total !== 0">
						<u-loadmore :status="loadmoreStatus" line @loadmore="handleScrollBottom" />
					</view>
					<Empty :show="total === 0" top="20rpx"></Empty>
				</scroll-view>
			</view>

		</view>
		<Modal :show.sync="modalShow" content="您确定要将打赏金额转为余额吗？" @confirm="handleModalConfirm"></Modal>
	</view>
</template>

<script>
	import Modal from '@/components/modal/index.vue'
	import mixins from "@/mixins";
	import Empty from '@/components/empty/index.vue'
	import YearMonthPicker from "@/components/picker-year-month/index.vue"
	import {
		reward,
		rewardList,
		rewardBalance
	} from "@/api/mine"
	export default {
		name: "",
		mixins: [mixins],
		components: {
			Empty,
			YearMonthPicker,
			Modal
		},
		data() {
			return {
				modalShow: false,
				detailData: {},
				list: [],
				queryParams: {
					date: '',
					page: 1,
					limit: 10
				},
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			handleModalConfirm() {
				this.$modal.loading('处理中...').then(() => {
					rewardBalance().then(res => {
						this.getData()
						this.$modal.closeLoading()
					}).catch(() => this.$modal.closeLoading())
				})
			
			},
			handleSubmit() {
				this.modalShow = true
			},
			handleToBalance() {
				this.$tab.navigateTo('reward-record')
			},
			getData() {
				this.getDetail()
				this.getList()
			},

			getList() {
				rewardList(this.queryParams).then(res => {
					let {
						data: {
							list,
							count,
							total
						}
					} = res
					this.total = count || 0
					this.pageTotal = total || 0
					if (this.queryParams.page === this.pageTotal) this.loadmoreStatus = 'nomore'
					if (this.queryParams.page === 1) {
						this.list = list
					} else if (this.queryParams.page < this.pageTotal) {
						this.list = this.list.concat(list)
					}
				})
			},
			getDetail() {
				reward().then(res => {
					let {
						data
					} = res
					this.detailData = data
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '@/common/css/var.scss';

	.container {
		background: url('/static/images/index/statictics-bg.png') no-repeat fixed top center / 100% auto;

		.main {
			padding: 24rpx;
			padding-top: 36rpx;
			@include fixed-height;
			overflow: hidden;
			display: flex;
			flex-direction: column;

			.card {
				width: 100%;
				border-radius: 20rpx;
				background-color: #fff;
				padding: 20rpx 32rpx 34rpx 32rpx;
				margin-bottom: 20rpx;

				.card-line {
					width: 2rpx;
					height: 72rpx;
					background-color: #DDE0E6;
				}
			}

			.down-menu {
				// width: 220rpx;
				height: 64rpx;
				background-color: #fff;
				border-radius: 32rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 400;
				font-size: 24rpx;
				line-height: 32rpx;
				padding: 16rpx 20rpx 16rpx 32rpx;

				&>image {
					margin-left: 14rpx;
				}
			}

			.list-item {
				padding: 24rpx;
				margin-bottom: 20rpx;
			}
		}
	}
</style>